<template>

  <van-nav-bar
      title="记录详情"
      left-text="返回"
      right-text="..."
      left-arrow
      @click-left="back"
  />

  <div class="cash-back-log">
    <van-cell-group>
      <van-cell v-for="log in cashbackLogs" :key="log.id">
        <template #title>
          <div class="log-title">返现金额: {{ log.amount }}元</div>
          <div class="log-subtitle">订单号: {{ log.no }}</div>
        </template>
        <template #label>
          <div class="log-subtitle">创建时间: {{ log.ctime }}</div>
        </template>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { get } from '../util/request'; // 假设封装的请求方法

const cashbackLogs = ref([]);

// 在组件加载时获取返现详情
onMounted(() => {
  fetchCashbackLogs();
});

const back = () => {
  history.back();
}

const fetchCashbackLogs = () => {
  // 发送请求获取返现详情
  get('/user/wallet/cashBackLog').then(response => {
    if (response.code === 0) {
      cashbackLogs.value = response.data;
    } else {
      console.error('获取返现详情失败:', response.message);
    }
  }).catch(error => {
    console.error('获取返现详情失败:', error);
  });
};
</script>

<style scoped>
.cash-back-log {
  padding: 20px;
}

.log-title {
  font-size: 16px;
  font-weight: bold;
}

.log-subtitle {
  font-size: 14px;
  color: #666;
}
</style>
